<template>
	<view @click="searchBoxHandler()" class="my-search-container" :style='{"line-height":containerHeight/2+"px","background-color":bgColor,height:containerHeight+"px"}'>
		<u-icon :style="{'opacity':lucency+'%'}" name="integral-fill" :color="color" size="53" class="icon-fill"></u-icon>
		<u-icon name="chat" :style="{'margin-top':containerHeight/2+'px'}" class="icon-chat" :color="color" size="60"></u-icon>
		<view :style="{'borderRadius':radius,'width':width+'%','margin-top':containerHeight/2+'px'}" class="my-search-box">
			<icon class="icon-search" type="search" size="20"></icon>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue'
	export default {
		data(){
			return{
				hig:this.$store.state.tabBarHeight,
			}
		},
		props:{
			bgColor:{
				type:String,
				default:'transparent'
			},
			radius:{
				type:Number,
				default:18
			},
			color:{
				default:'#fff'
			},
			width:{
				default:70
			},
			lucency:{
				default:100
			},
			height:{},
			containerHeight:{
				
			}
		},
		methods:{
			searchBoxHandler(){
				this.$emit('myClick')
			}
		},
		mounted() {
			this.containerHeight = this.$store.state.tabBarHeight
		}
	}
</script>

<style lang=scss>
	
	.my-search-container{
		background: #c00000;
		height: 60px;
		padding: 0 10px;
		line-height: 60px;
		text-align: center;
		/* display: flex; */
		/* align-items: center; */
		/* justify-content: space-between; */
		position: relative;
		
		.my-search-box{
			float: right;
			height: 32px;
			border-radius: 18px;
			background: rgba(233,233,233,.9);
			width: 70%;
			/* display: flex; */
			/* justify-content: center; */
			padding-left: 30rpx;
			/* align-items: center; */
			transform: translateY(-50%) translateX(-8px);
			margin-top: 30px;
			position: relative;
			z-index: 10;
			
			.icon-search{
				transform: translateY(-34%) translateX(-50%);
				position: absolute;
				top: 50%;
				left: 50%;
			}
		}
		
		.icon-chat{
			float: right;
			transform: translateY(-50%);
			margin-top: 30px;
		}
		
		.icon-fill{
			/* float: left;
			transform: translateY(-50%);
			margin-top: 30px; */
			left: 10px;
			transform: translateY(-50%);
			top: 50%;
			position: absolute;
		}
	}
	
</style>
